<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影评论社区</title>
    <%- include common %>
</head>

<body>
    <%- include("head",{title:"mlist",username})%>
    <div class="container container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-12">
                <h2 class="text-danger text-center">评论列表</h2>
                <div class="row col-md-3 col-lg-3 com-md-3" style="margin:10px 0; ">
                    <select class="form-control " id="select" data-page="<%- page%>">
                        <option value="5" <%-pageSize==5?'selected':''%>>每页5条</option>
                        <option value="10" <%-pageSize==10?'selected':''%>>每页10条</option>
                        <option value="20" <%-pageSize==20?'selected':''%>>每页20条</option>
                        <option value="40" <%-pageSize==40?'selected':''%>>每页40条</option>
                    </select>
                </div>

            </div>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr style="width:100%;" class="text-center text-danger">
                        <td>序号</td>
                        <td>评论人</td>
                        <td>评论标题</td>
                        <td>评论内容</td>
                        <td>评论电影</td>
                        <td>电影名称</td>
                        <td>时间</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <% if(result.length >0){ %>
                    <%   result.map((item,idx)=>{  %>
                    <tr class="text-center ">
                        <td><%- idx+1%></td>
                        <td><a href="/comment/my?author=<%- item.author%>"><%- item.author%>-<span
                                    class="text-danger"><%- username == item.author?'楼主':''%></span></a></td>
                        <td style="width:120px;word-break: break-all;"><a
                                href="/comment/detail?_id=<%- item._id %>"><%- item.title %></a></td>
                        <td style="width:200px;word-break: break-all;"><%- item.content%></td>
                        <td><%- item.movie.title%></td>
                        <td><a href="/comment/moviepin?mid=<%- item.mid%>">
                                <img width="80px" height="80px"
                                    src="<%- item.movie.images.large.replace(/img7/,'img3') %>" alt=""></a>
                        </td>
                        <td><%- item.time%></td>
                        <td style="width:240px;">
                            <button class="btn btn-success" data-item='<%- JSON.stringify(item)%>' id="showbtn"
                                onclick="showThisAnswer(this)" data-toggle="modal" data-target="#showanswer">查看回复</button>

                            <% if(username == item.author){ %>
                            <button class="btn btn-info" onclick="window.location.href='/comment/update?_id=<%- item._id%>'">修改</button>
                            <button class="btn btn-danger" onclick="getdelId('<%-item._id%>')" data-toggle="modal" data-target="#delbox" >删除</button>
                            <%   }  %>

                        </td>
                    </tr>
                    <%  })  %>
                    <tr>
                        <td colspan="8">
                            <button class="btn btn-danger pull-right">删除所有</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li>
                                        <a href="/comment/mlist?page=<%-page - 1 %>&pageSize=<%- pageSize%>"
                                            aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li><a
                                            href="/comment/mlist?page=<%-page -2  %>&pageSize=<%- pageSize%>"><%- page-2  %></a>
                                    </li>
                                    <li><a
                                            href="/comment/mlist?page=<%-page -1  %>&pageSize=<%- pageSize%>"><%- page-1 %></a>
                                    </li>
                                    <li class="active "><a href="/comment/mlist?page=<%-page%>&pageSize=<%- pageSize%>">
                                            <%- page %></a></li>
                                    <li><a
                                            href="/comment/mlist?page=<%-page + 1 %>&pageSize=<%- pageSize%>"><%- page + 1 %></a>
                                    </li>
                                    <li><a href="/comment/mlist?page=<%-page + 2 %>&pageSize=<%- pageSize%>"><%- page + 2 %>
                                        </a></li>
                                    <li>
                                        <a href="/comment/mlist?page=<%-page + 1 %>&pageSize=<%- pageSize%>"
                                            aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                        <td colspan="3">
                            <div class="pull-right" style="display:flex;">
                                <p>第<%- page%>条 /每页<%- pageSize%>条</p>
                                <p>-----</p>
                                <p>总<%- total%>条 /共<%- totalPage%>页</p>

                            </div>
                        </td>
                    </tr>
                    <%   }else{  %>
                    <tr>
                        <td colspan="8" class="text-success">
                            暂无数据，马上添加评论
                        </td>
                    </tr>
                    <%  } %>
                </tbody>

            </table>



        </div>


    </div>
    <!-- 模态框插件 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="showanswer">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">来自网友回复---<span class="text-danger" id="mtitle">熔炉</span></h4>
                    <h6 id="thistitle"></h6>
                </div>
                <div class="modal-body" id="answerlist">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success"  id="gotodetail"  onclick="gotodetail(this)">添加回复</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除评论</h4>
                </div>
                <div class="modal-body" >
                    <p>你确定要删除这条评论吗？</p>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger"  onclick="delsubmit()">确定删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <%- include foot %>

    <script>
        //确认删除评论的操作
        var itemId = null
        function getdelId(_id){
  
          itemId = _id
        }

        function delsubmit(){
            $.ajax({
                url:'/comment/delsubmit',
                method:"POST",
                data:{
                    _id:itemId
                },
                success:res=>{
                window.location.reload()
                }
            })
        }
        //点击 查看回复的代码操作
        function showThisAnswer(that) {
            //   console.log($("#showbtn").attr('data-item'))
            var item = JSON.parse($(that).attr('data-item'))
            $("#mtitle").html(item.movie.title)
            $("#thistitle").html(item.title)
            $("#answerlist").html("")
            $("#gotodetail").attr("data-id",item._id)
            var oDiv =''
            item.answer && item.answer.forEach(val => {
                oDiv += `
                  <div style="display: flex;justify-content: space-between;">
                                <p class=" text-warning"> # ${val.id} </p>
                                <p> 来自:${val.author?val.author:'佚名'} </p>
                               
                            </div>
                            <div style="display: flex;justify-content: space-between;border-bottom:1px dashed red;padding-bottom:5px">
                                <p class=" text-danger"> 内容 : ${val.subtitle} </p>
                                <p class=" text-warning"> 时间 :${val.time} </p>
                            </div>
           `
        })
            $("#answerlist").html(oDiv?oDiv:"暂无网友回复")
        }

        //添加回复
        function gotodetail(that){
            console.log("gotodetail")
            window.location.href='/comment/detail?_id='+$(that).attr("data-id")  //绑定id

        }

        //对selected 进行分页的代码操作
        $("#select").on("change", function () {
            console.log($(this).val())
            var page = $(this).attr("data-page")
            var pageSize = $(this).val()
            window.location.href = "/comment/mlist?page=" + page + "&pageSize=" + pageSize
        })
    </script>

</body>

</html>